<template>
	<view class="home cl_flex_page">
		<!-- <cl-nav-bar></cl-nav-bar> -->
		<view class="tab">
			<view class="tab_item" :class="{tab_item_active: activeTab === 'xf'}" @click="activeTab = 'xf'">
				<!-- <image src="/static/xf.png" mode="widthFix"></image> -->
				<text>积分消费</text>
			</view>
			<view class="tab_item" :class="{tab_item_active: activeTab === 'hz'}" @click="activeTab = 'hz'">
				<!-- <image src="/static/hz.png" mode="widthFix"></image> -->
				<text>积分汇总</text>
			</view>
			<view style="margin-left: auto;font-size: 24rpx;" @click="handleToLogin">
				切换账号
			</view>
		</view>
		<view class="list" style="flex: 1;overflow: hidden;">
			<Consumption v-if="activeTab === 'xf'"></Consumption>
			<Summary v-if="activeTab === 'hz'"></Summary>
		</view>
	</view>
</template>

<script setup>
	import {ref}  from 'vue'
	import Consumption from '../points/consumption.vue'
	import Summary from '../points/summary.vue'
	const handleToPage = (url) => {
		uni.navigateTo({
			url
		})
	}
	const activeTab = ref('xf')
	const handleToLogin = () => {
		uni.navigateTo({
			url: '/pages/login/index'
		})
	}
</script>

<style scoped lang="scss">
	.home {
		.tab {
			padding: 20rpx;
			display: flex;
			background-color: $uni-bg-color;
			&_item {
				position: relative;
				margin-right: 20rpx;
				display: flex;
				align-items: center;
				cursor: pointer;
				text {
					padding-left: 6rpx;
					font-size: 24rpx;
				}
				&_active{
					font-weight: bold;
					&::after {
					position: absolute;
					bottom: -14rpx;
					left: 50%;
					transform: translateX(-50%);
					display: inline-block;
					content: '';
					width: 80%;
					height: 6rpx;
					border-radius: 10rpx;
					background-color: $uni-color-primary;
				}
				}
			}
		}
	}
</style>